<template>
  <div class="block_main blue-tit">
    <!-- <div class="nytit">首页&gt;通知/督办</div> -->

    <el-row style="padding-top: 10px">
      <el-col :span="24" style="padding:0 5px">
        <el-card>
          <div class="title">诉求</div>
          <el-form class="w50-form-inline" :rules="rules" ref="ruleForm" :model="AddForm" label-width="150px" size="small">
            <el-form-item label="企业名称" prop="company">
              <el-input v-model="AddForm.company" placeholder="请输入企业名称"></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="user">
              <el-input v-model="AddForm.user" placeholder="请输入联系人"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="AddForm.phone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <el-form-item label="座机电话" prop="tel">
              <el-input v-model="AddForm.tel" placeholder="请输入座机电话"></el-input>
            </el-form-item>
            <el-form-item label="诉求分类" prop="group">
              <el-select v-model="AddForm.group" placeholder="诉求分类"  @change="groudChange" style="width:100%;">
                <el-option v-for="(item,index) in MsgGroup" :label="item.name" :value="item.id" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="经营行业" prop="selectedOptions">
              <el-cascader
              style="width:100%;"
                expand-trigger="hover"
                :options="selectOptions"
                v-model="AddForm.selectedOptions"
                @change="groupselect"
                >
              </el-cascader>
            </el-form-item>
            <el-form-item label="经纬度" class="area">
              <el-input v-model="AddForm.longitude" placeholder="请输入经度"></el-input>
              <el-input v-model="AddForm.latitude" placeholder="请输入纬度"></el-input>
            </el-form-item>
            <div class="flexblock" style="width:100%;">

              <el-form-item label="企业地址" prop="areas" >
                  <el-cascader
                    expand-trigger="hover"
                    :options="areaOptions"
                    v-model="AddForm.areas"
                    >
                  </el-cascader>
              </el-form-item>
              <el-form-item label="详细地址" prop="address" >
                <el-input  v-model="AddForm.address" placeholder="请输入企业地址"></el-input>
              </el-form-item>
            </div>
            
            <el-form-item label="诉求内容" style="width:100%;" prop="content">
              <el-input type="textarea" v-model="AddForm.content" rows='5' placeholder="请输入诉求内容"></el-input>
            </el-form-item>
            <el-form-item label="来源" style="width:100%;">
              <el-radio-group v-model="AddForm.from" @change="fromChange">
                <el-radio v-for="(item,index) in originArr" :label="item.label" :value="item.value" :key="index">{{item.name}}</el-radio>
              </el-radio-group>
              <el-input v-if = "fromIsShow" type="text" style="width:120px;" v-model="AddForm.fromother" rows='5' placeholder="请输入来源"></el-input>
            </el-form-item>
            <el-form-item label="上传" style="width:100%;">
              <el-upload class="upload-demo" :action="httpHome+'direct/Massage/uploadFile'" :on-change="handleUpload" :on-success="fileSuccess" :before-upload="beforeupload" :multiple='true' :before-remove="handlemove" :file-list="fileList3">
                <el-button size="small" type="primary">上传附件</el-button>
                <div slot="tip" class="el-upload__tip">支持文档、图片、压缩包等类型文件上传</div>
              </el-upload>
            </el-form-item>

          </el-form>
        </el-card>
      </el-col>
      <el-col :span="24" style="padding:0 5px;margin-top:30px;">
        <el-card>
          <div class="title">移交</div>
         

          <select-menu :sname="sname" ref="mesage" :options="options" :dynamicValidateForm="dynamicValidateForm" v-on:changename="update"></select-menu>
          <!--市级部门-->
          <select-menu :sname="sname2" ref="mesage2" :options="optionsArea" :dynamicValidateForm="dynamicValidateFormArea" v-on:changename="updateArea"></select-menu>
          <!--县长热线-->

          <over-time ref="over"></over-time>

        </el-card>

      </el-col>
      <el-col :span="24" style="padding:0 5px;margin-top:30px;" class="">
        <el-button size="small" type="primary" @click="moveTo('ruleForm')">移交</el-button>
        <el-button size="small" type="primary" @click="saveForm('ruleForm')">保存</el-button>
        <!-- <el-button size="small" type="primary">取消</el-button> -->
        <el-button size="small" class="marbtn" @click="$router.go(-1)" style="width:min-content;" type="warning">返回</el-button>
      </el-col>
    </el-row>

  </div>
</template>
<script>
import actionurl from "@/assets/js/actionurl";
import selectMenu from "@/components/selectMenu.vue";
import config from "../../config";
import overTime from "@/components/overTime.vue";

export default {
  name: "questionAdd",
  components: {
    selectMenu,
    overTime
  },
  data() {
    return {
      MsgGroup:[],
      selectOptions:[],
      groupChildId:'',
      areaOptions:[],
      fromIsShow:false,
      overtime: "",
      httpHome: "",
      originArr: [
        {
          label: "0",
          value: "0",
          name: "微信"
        },
        {
          label: "1",
          value: "1",
          name: "热线"
        },
        {
          label: "2",
          value: "2",
          name: "平台"
        },
        {
          label: "3",
          value: "3",
          name: "在线客服"
        },
        {
          label: "4",
          value: "4",
          name: "民营经济分析系统"
        },
        {
          label: "5",
          value: "5",
          name: "面对面帮扶"
        },
        {
          label: "7",
          value: "7",
          name: "线下服务"
        }
        // {
        //   label: "6",
        //   value: "6",
        //   name: "其他"
        // }
      ],
      cityArr: [],
      countyArr: [],
      filePath: "",
      MsgGroup: [],
      sname: "市级部门",
      sname2: "县长热线",
      AddForm: {
        company: "",
        resource: "0",
        from: "2"
      },
      dynamicValidateForm: {
        domains: [
          {
            value: "运维",
            id: "10"
          }
        ],
        selectList: [
          {
            value: "",
            id: ""
          }
        ]
      },
      options: [
        {
          value: "10",
          label: "测试部门",
          id: "11"
        }
      ],
      dynamicValidateFormArea: {
        domains: [
          {
            value: "河北",
            id: "12"
          }
        ],
        selectList: [
          {
            value: "",
            id: ""
          }
        ]
      },
      optionsArea: [
        {
          value: "10",
          label: "安次区",
          id: "11"
        }
      ],

      fileList3: [],
      rules: {
        company: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
          { min: 2, message: "长度在2字符以上", trigger: "blur" }
        ],
        user: [
          { required: true, message: "请输入公司联系人", trigger: "blur" }
        ],
        phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        group: [
          {required: true, message: '请选择诉求分类', trigger: 'change'}
        ],
        selectedOptions:[
          {required: true, message: '请选择行业分类', trigger: 'change'}

        ],
        areas:[
          {required: true, message: '请选择地区', trigger: 'change'}

        ]
      },
      mesage: "",
      mesage2: ""
    };
  },
  created() {
    this.httpHome = config.URLWEBHTTP;
    //设置默认截止日期
    function addZero(n) {
      return n < 10 ? "0" + n : "" + n;
    }
    // var newday = Date.parse(new Date())+60*60*24*7*1000;
    var ddd = new Date(new Date());

    var month = ddd.getMonth() + 1;
    var day = ddd.getDate();
    var year = ddd.getFullYear();
    if (month == 0) {
      month = 12;
      year = year - 1;
    }
    if (month < 10) {
      month = addZero(month);
    }
    this.getAreaList();
    this.getGroupList();
  },

  methods: {
    groupselect(values){//行业分类选择事件
   
      var fatherArr = this.selectOptions.filter(item => item.value==values[0] );
      this.groupChildId = fatherArr[0].children.filter(item => item.value==values[1])[0].value
      // console.log(fatherArr[0].children.filter(item => item.value==values[1]));
    },
    groudChange(values){//诉求分类change事件
      this.groupID = values
      this.thisTitle = this.MsgGroup.filter(item => item.id==values )[0].name;
    
    },
    getGroupList(){//获取企业分类
      var _this = this;
      actionurl.getLibraryGroupList({}, function(re) {
          _this.selectOptions = re.data;
        }
      );
    },
    handleChange(value){//企业分类选择事件
  
    },   
    getAreaList(){//获取地区接口
      var _this = this;
      actionurl.getDirectArea({}, function(re) {
          _this.areaOptions = re.data.children;
        }
      );
    },
    fromChange(val){
      // val == '6' ? this.fromIsShow = true : this.fromIsShow = false;
    },
    update(name) {
      //获取市级增加的菜单数组

      this.cityArr = name;
      if (name.length > 0) {
        this.mesage = name.join(",");
      } else {
        this.mesage = "";
      }
    },
    updateArea(name) {
      //获取区县级增加的菜单数组
      this.countyArr = name;
      if (name.length > 0) {
        this.mesage2 = name.join(",");
      } else {
        this.mesage2 = "";
      }
    },
    moveTo(formName) {
      if (
        this.$refs.mesage.getContent().length == 0 &&
        this.$refs.mesage2.getContent().length == 0
      ) {
        this.$message.error("请选择县长热线或者请选择市级部门");
        return;
      }
      this.loading = true;
      // console.log(this.mesage = this.$refs.mesage.getContent().join(','));
      // return;
      var _this = this;
      _this.$refs[formName].validate(valid => {
        if (valid) {
          _this.loading = true;
          actionurl.MaddAndTransfer(
            {
              id: _this.$route.params.id,
              phone: _this.AddForm.phone,
              company: _this.AddForm.company,
              user: _this.AddForm.user,
              title: _this.thisTitle,
              content: _this.AddForm.content,
              group: _this.groupID,
              from: _this.AddForm.from,
              address: _this.AddForm.address,
              city: _this.$refs.mesage.getContent().join(","),
              county: _this.$refs.mesage2.getContent().join(","),
              attach: JSON.stringify(_this.fileList3),
              final_time: _this.$refs.over.getContent(),
              area:_this.AddForm.areas[0],
              villages:_this.AddForm.areas[1],
              com_group:_this.groupChildId,
              tel:_this.AddForm.tel,
              longitude:_this.AddForm.longitude,
              latitude:_this.AddForm.latitude
            },
            function(re) {
              _this.$message("添加成功");
              _this.loading = false;
              _this.$router.push({ path: "/home" });
            }
          );
        } else {
          console.log("error submit!!");
          _this.loading = false;
          return false;
        }
      });
    },
    saveForm(formName) {
      //保存操作

      this.loading = true;
      // return;
      var _this = this;
      _this.$refs[formName].validate(valid => {
        if (valid) {
          if (!this.AddForm.group) {
            this.$message("请选择诉求分类");
            return;
          }
          _this.loading = true;
          actionurl.MuserAdd(
            {
              id: _this.$route.params.id,
              phone: _this.AddForm.phone,
              company: _this.AddForm.company,
              user: _this.AddForm.user,
              title: _this.thisTitle,
              content: _this.AddForm.content,
              group: _this.groupID,
              from: _this.AddForm.from,
              address: _this.AddForm.address,
              city: _this.$refs.mesage.getContent().join(","),
              county: _this.$refs.mesage2.getContent().join(","),
              attach: JSON.stringify(_this.fileList3),
              final_time:_this.$refs.over.getContent(),
              area:_this.AddForm.areas[0],
              villages:_this.AddForm.areas[1],
              com_group:_this.groupChildId,
              tel:_this.AddForm.tel,
              longitude:_this.AddForm.longitude,
              latitude:_this.AddForm.latitude
            },
            function(re) {
              if (re.status == 1) {
                _this.$message(re.msg);
                _this.loading = false;
                _this.$router.push({ path: "/home" });
              } else {
                _this.$message(re.msg);
                _this.loading = false;
              }
            }
          );
        } else {
          console.log("error submit!!");
          _this.loading = false;
          return false;
        }
      });
    },
    handleUpload(file, fileList) {
      // this.fileList3 = fileList.slice(-3);
    },
    beforeupload(file) {},
    fileSuccess(event, file, fileList) {
      console.log(file, "file");
      if (file.response.status == "0") {
        var obj = {};
        obj.name = file.name;
        obj.url = file.response.data.path;
        this.fileList3.push(obj);
      } else {
        this.$message("添加失败");
        // console.log(this.fileList3,'fileList3');
        // this.fileList3.splice(this.fileList3.length-1,1);
      }
    },
    GetTargetList() {
      //获取区县以及市级下拉菜单获取
      var _this = this;
      actionurl.targetListByType({}, function(re) {
        _this.options = re.data.city;
        _this.optionsArea = re.data.county;
      });
    },
    GetMsgGroup() {
      //获取诉求分类
      var _this = this;
      actionurl.MessageGroup(
        {
          mesgroup: 1, //0-面对面等分类 1-八大类
          fid: 1
        },
        function(re) {
          console.log(re);
          _this.MsgGroup = re.data;
        }
      );
    },
    handlemove(file, fileList) {
      console.log(file, "file");
      var _this = this;
      actionurl.delfile(
        {
          file: file.url
        },
        function(re) {
          if ((re.status = 1)) {
            _this.$message("删除成功");
            _this.fileList3 = fileList;
          } else {
            _this.$message(re.msg);
          }
        }
      );
    }
  },
  mounted() {
    if (this.$refs.mesage.getContent().length > 0) {
      this.mesage = this.$refs.mesage.getContent().join(",");
    } else {
      this.mesage = "";
    }
    if (this.$refs.mesage2.getContent().length > 0) {
      this.mesage = this.$refs.mesage2.getContent().join(",");
    } else {
      this.mesage2 = "";
    }

    this.GetTargetList();
    this.GetMsgGroup();
    $(".selectinput")
      .find("input")
      .each(function() {
        var length = $(this).val().length;
        $(this).css("width", length * 15 + 40);
      });
  }
};
</script>
<style scoped lang="scss">
.btnflex {
  display: flex;
  position: relative;

  // .add{
  //   position: absolute;
  //   right: 0;
  //   top: 0;
  // }
  p {
    margin-right: 20px;
  }
}
.el-form--inline.selectinput .el-form-item {
  position: relative;
}
.el-form--inline.selectinput .el-form-item:after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent #f00 transparent transparent;
  position: absolute;
  right: 0;
  top: 1px;
  z-index: 1;
}
.el-form--inline.selectinput {
  padding-left: 20px;
}
.el-form--inline.selectinput .el-form-item .el-input__inner {
  text-align: center;
}
.el-form--inline.selectinput .el-form-item .el-icon-close {
  position: absolute;
  right: 0;
  top: 1px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  z-index: 2;
}
label {
  display: inline-block;
  text-align: right;
  padding: 0 12px 0 0;
}
.w50-form-inline{
  display: flex;
  flex-wrap: wrap;
  width:95%;
  .el-form-item{
    width: 44%;
  }
}

</style>
